<template>
  <span class="menu-icon">
    <template v-if="titleUseColor">
      <span v-if="menuType==0" class="menu-color-dir"><svg-icon icon-class="folder-open-fill"/>{{title}}</span>
      <span v-else-if="menuType==1" :style="{color: pageColor}"><i class="el-icon-document"/>{{title}}</span>
      <span v-else-if="menuType==2" class="menu-color-bt"><svg-icon icon-class="radio" />{{title}}</span>
      <span v-else >{{title}}</span>
    </template>
    <template v-else>
      <span>
        <svg-icon icon-class="folder-open-fill" class="menu-color-dir" v-if="menuType==0"/>
        <i class="el-icon-document" :style="{color: pageColor}" v-else-if="menuType==1"/>
        <svg-icon icon-class="radio" class='menu-color-bt' v-else-if="menuType==2"/>
        {{title}}
      </span>
    </template>
  </span>
</template>

<script>
  export default {
    name:'MenuIcon',
    props:{
      menuType:{
        require: true
      },
      title:{
        type: String ,
        default: ''
      },
      titleUseColor:{
        type: Boolean,
        default: true
      }
    },
    data(){
      return {
      }
    },
    computed:{
      pageColor(){
        return this.$store.state.settings.theme;
      }
    }
  }
</script>

<style scoped>
  .menu-icon span i{
      margin-right: 4px;
  }
  .menu-color-dir{
    color: #c19c00;
  }

  .menu-color-page{

  }

  .menu-color-bt{
    color: green;
  }
</style>
